<template>
  <div v-loading="loading"
       element-loading-text="拼命加载中"
       element-loading-spinner="el-icon-loading"
       element-loading-background="rgba(0, 0, 0, 0.8)">
    <div>
      <el-button type="primary" icon="el-icon-search" @click="onSearchClick()">搜索</el-button>
      <el-input style="width: 30%"
                placeholder="请输入UID"
                v-model="inputDesc">
        <i slot="prefix" class="el-input__icon el-icon-search"></i>
      </el-input>
      <el-divider><i class="el-icon-zoom-in"></i></el-divider>
    </div>
    <el-table
      @header-click="sort"
      :data="tableData"
      border
      style="width: 100%"
      height="950">
      <el-table-column
        prop="uid"
        label="UID">
      </el-table-column>
      <el-table-column
        prop="userName"
        label="昵称">
      </el-table-column>
      <el-table-column
        show-overflow-tooltip=""
        prop="card"
        label="牌">
      </el-table-column>
      <el-table-column
        prop="operationDesc"
        label="操作">
      </el-table-column>
      <el-table-column
        prop="holdGolded"
        label="金币-前">
      </el-table-column>
      <el-table-column
        prop="exchangeGold"
        label="金币-变">
      </el-table-column>
      <el-table-column
        prop="holdGold"
        label="金币-后">
      </el-table-column>

      <el-table-column
        prop="date"
        label="时间">
      </el-table-column>
      <el-table-column
        prop="address"
        label="IP">
      </el-table-column>
      <el-table-column v-if="this.$store.getters.isShow"
        fixed="right"
        label="操作"
        width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="primary" icon="el-icon-edit" circle size="mini"></el-button>
          <el-button @click="closeClick(scope.$index,tableData)" type="danger" icon="el-icon-delete" circle
                     size="mini"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <el-pagination
      v-show="allSize > 30"
      style="margin-top: 20px"
      background
      layout="prev, pager, next"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage"
      :total="allSize"
      :page-size="pageSize">
    </el-pagination>

  </div>

</template>

<script>
  import axios from 'axios'

  const pageSizeConst = 30;
  export default {

    methods: {
      handleCurrentChange: function(currentPage){
        this.currentPage = currentPage;
        this.onSearchClick()
        console.log(this.currentPage)  //点击第几页
      },
      sort(column) {
        if (this.userUid !== null && this.userUid !== "") {
          let type = -1;
          let bool = false;
          switch (column.property) {
            case "holdGold":
              type = 1;
              if (this.isHoldGold) {
                this.isHoldGold = false;
                bool = false;
              } else {
                this.isHoldGold = true;
                bool = true;
              }
              break;
            case "exchangeGold":
              type = 2;
              if (this.isExchangeGold) {
                this.isExchangeGold = false;
                bool = false;
              } else {
                this.isExchangeGold = true;
                bool = true;
              }
              break;
            case "holdGolded":
              type = 3;
              if (this.isHoldGolded) {
                this.isHoldGolded = false;
                bool = false;
              } else {
                this.isHoldGolded = true;
                bool = true;
              }
              break;
            case "date":
              type = 4;
              if (this.isDate) {
                this.isDate = false;
                bool = false;
              } else {
                this.isDate = true;
                bool = true;
              }
              break;
            default:
              break;
          }
          if (type != -1) {
            this.loading = true
            axios.get("/sort", {
              params: {
                uid: this.userUid,
                uid: this.inputDesc,
                pageSize: pageSizeConst,
                currentPage: this.currentPage,
                type: type,
                bool: bool
              }
            }).then(resp => {
              if (resp.data.result) {
                this.tableData = resp.data.msg.data
                this.allSize = resp.data.msg.count
              }
              this.loading = false
            }).catch(err => {
              this.loading = false
            })
          }
        }
      },
      onSearchClick() {
        this.loading = true
        this.userUid = this.inputDesc
        axios.get("/searchuserlog", {
          params: {
            uid: this.inputDesc,
            pageSize: pageSizeConst,
            currentPage: this.currentPage,
          }
        }).then(resp => {
          if (resp.data.result) {
            this.tableData = resp.data.msg.data
            this.allSize = resp.data.msg.count
          }
          this.loading = false
        }).catch(err => {
          this.loading = false
        })
        //搜索
      },
      handleClick(row) {
        this.$router.push({
          path: '/userEdit',
          query: {
            uid: row.uid,
            userName: row.userName,
            scenes: 'userLog'
          }
        });
      },
      closeClick(index, rows) {
        let row = rows[index]
        this.$confirm('是否将玩家<<' + row.userName + '>>封号并且踢下线?', '封号', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
          axios.get("/kicking", {
            params: {
              uid: row.uid
            }
          }).then(resp => {
            if (resp.data.result) {
              rows.splice(index, 1);
              //请求服务器是否可以封号
              this.$message({
                type: 'success',
                message: resp.data.msg
              });
            } else {
              this.$message({
                type: 'success',
                message: resp.data.error
              });
            }
          })

        }).catch(() => {
          console.log('取消');
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
    },
    computed: {
      request() {
        console.log(this.currentPage)
      },
    },
    data() {
      return {
        userUid: '',
        loading: false,
        tableData: [],
        inputDesc: '',
        isHoldGolded: false,
        isExchangeGold: false,
        isHoldGold: false,
        isDate: false,
        currentPage: 1,
        pageSize: pageSizeConst,
        allSize: 0
      }
    }
  }
</script>

<style scoped>

</style>
